<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        computed 计算属性:
        作用: 封装了一段对于数据的处理,求得一个结果
        语法:
            1. 写在 computed 配置中 
            2. 作为属性, 直接使用 this.计算属性 {{ 计算属性 }}
        computed 有缓存属性(提升性能)
            计算属性会对计算出来的结果缓存,再次使用直接读取缓存,
            依赖项变化了,会自动重新计算 -> 并再次缓存





        methods 方法:
        作用: 给实例提供一个方法,调用以处理业务逻辑
        语法:
            1. 写在 methods 配置项中
            2. 作为方法, 需要调用 -> this.方法名() {{ 方法名() }} @事件名="方法名"
     -->
    <div id="app">
        <table>
            <tr>
                <th>名字</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item, index) in list" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.num }}个</td>
            </tr>
        </table>
        <h3>购物车:有缓存<span> {{ totalCount }}</span></h3>
        <h3>购物车:有缓存<span> {{ totalCount }}</span></h3>
        <h3>购物车:有缓存<span> {{ totalCount }}</span></h3>

        <h3>购物车:无缓存<span> {{ totalCount2() }}</span></h3>
        <h3>购物车:无缓存<span> {{ totalCount2() }}</span></h3>
        <h3>购物车:无缓存<span> {{ totalCount2() }}</span></h3>


        <p>礼物总数: {{ totalCount }} 个</p>
    </div>
    <script src="./vue.js"></script>
    <script>
         const app = new Vue({
            el: '#app',
            data: {
                list: [
                    {id: 1, name: "篮球", num: 11},
                    {id: 2, name: "玩具", num: 2},
                    {id: 3, name: "铅笔", num: 5},
                ]
            },
            methods: {
                totalCount2 () {
                    // 多次调用会打印多次,因为没有有缓存
                    console.log("方法执行了")
                    let res = this.list.reduce((sum, item) => sum + item.num, 0)
                    return res
                }
                
            },
            computed: {
                totalCount (){
                    // 多次调用也只打印一次,因为计算属性有缓存
                    console.log("计算属性执行了")
                    let res = this.list.reduce((sum, item) => sum + item.num, 0)
                    return res
                }
            }
        })
    </script>
</body>
</html>